<template>
	<view class="uni-textarea">
		<view class="btn-popup" @click="open">
			<slot></slot>
		</view>
		<uni-popup ref="textareaPopup" type="bottom" :mask-click="false">
			<view class="popup-inner">
				<view class="textarea-head">
					<view class="textarea-title">{{title}}</view>
					<view class="iconfont icon-close"  @click="close"></view>
				</view>
				<view class="textarea-body">
					<textarea :placeholder="'请输入' + title" v-model="textarea" :maxlength="500" class="textarea"></textarea>
				</view>
				<view class="btn-box">
					<button class="btn-cancel" @click="close">取消</button>
					<button class="btn-confirm" @click="confirm">确定</button>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"uni-textarea",
		props:{
			title:{
				type: String
			},
			value:{
				type: String
			}
		},
		data() {
			return {
				textarea: null // 当前值
			};
		},
		created() {

		},
		methods:{
			open(){
				this.textarea = this.value;
				uni.hideTabBar()
				this.$refs.textareaPopup.open();
				
			},
			close(){
				uni.showTabBar()
				this.$refs.textareaPopup && this.$refs.textareaPopup.close();
			},
			/**
			 * 选中
			 * @param {Object} item
			 */	
			confirm(item){
				this.$emit('input', this.textarea);
				this.close()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup-inner
	{	
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		height:750rpx;
		width: 100%;
		background-color: #FFFFFF;
		
		.textarea-head{
			display: flex;
			line-height: 124rpx;
			height:124rpx;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #0A1738;
			padding:0 32rpx;
			justify-content: space-between;
			.icon-close{
				font-size:24rpx;
				height: 48rpx;
				line-height: 50rpx;
				width: 48rpx;
				text-align: center;
			}
		}
		
		.textarea-body{
			height: 460rpx;
			width:688rpx;
			margin:0 auto;
			color:#000000;
			
		
			
			.textarea{
				width:688rpx;
				height: 460rpx;
				overflow-y: auto;
				font-size: 32rpx;
				line-height: 40rpx;
			}
			
		}
		
	}
	
	.btn-box{
		display: flex;
		justify-content: center;
		padding:30rpx 0;
		
		button{
			width:240rpx;
			height: 80rpx;
			padding:0rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			border-radius: 8rpx;
			letter-spacing: 1rpx;
			margin:0 10rpx;
		}
		
		.btn-cancel{
			background:#FFFFFF;
			border:2rpx solid $uni-color-primary;
			color:$uni-color-primary;
		}
		.btn-confirm{
			background: $uni-color-primary;
			border:2rpx solid $uni-color-primary;
			color:#FFFFFF;
		}
		
		[disabled]{
			color: rgba(0,0,0,.3);
			background-color: #f7f7f7;
			border:2rpx solid #f7f7f7;
		}
	}
	
	
	
	
	
</style>